import React from 'react';
import {
  View, Text, TouchableOpacity, StyleSheet
} from 'react-native';
import moment from 'moment';
import Status from './Status';
import { colors, sizes } from '../constants/theme';


export default function ProcessItem({ navigation, item }) {
  const {
    start, processName, status, owner, id, process
  } = item;

  return (
    <TouchableOpacity onPress={() => {
      navigation.navigate('ProcessDetail',
        {
          title: processName, historyId: id, processId: process
        });
    }}
    >
      <View style={styles.processItem}>
        <Text style={{
          fontSize: 17,
          marginBottom: sizes.sperate
        }}
        >
          工艺：
          {item.processName}
        </Text>
        <Status statusCode={status} />
        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
          <Text>
            开始时间：
            {moment(start).fromNow()}
          </Text>
          <Text>
            发布人：
            {owner}
          </Text>
        </View>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  processItem: {
    backgroundColor: 'white',
    padding: 10,
    marginHorizontal: 5,
    marginVertical: 3,
    borderColor: colors.gray3,
    borderWidth: 0.5,
    borderRadius: 2,
    shadowColor: colors.gray,
    shadowOffset: { width: 0.5, height: 0.5 },
    shadowOpacity: 0.4,
    shadowRadius: 1,
    elevation: 2
  },
});
